<template>
  <div>
    <el-row justify="end" style="margin-bottom: 10px">
      <el-col :span="3">
        <el-button @click="toAdminLogin"> 管理员登录 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="toLogin"> 登录 </el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="toLogin"> 创建账号 </el-button>
      </el-col>
      <el-col :span="3">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon><User /></el-icon>
            个人中心
            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-link
          :underline="false"
          style="font-size: 20px; font-weight: bolder"
          @click="this.$router.push('/main/search')"
        >
          专 业 百 科
        </el-link>
      </el-col>
      <el-col :span="3.5" :offset="6">
<!--        <el-tabs>-->
<!--          <el-tab-pane label="阅读" name="first"></el-tab-pane>-->
<!--          <el-tab-pane label="查看历史" name="second"></el-tab-pane>-->
<!--        </el-tabs>-->
      </el-col>
      <el-col :span="6" :offset="2">
        <el-input
          @keydown.enter="searchEntity"
          v-model="searchContent"
          placeholder="Search what you want"
        >
          <template #prefix>
            <el-icon>
              <search />
            </el-icon>
          </template>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      searchContent: "",
    };
  },
  methods: {
    searchEntity() {
      if (this.searchContent === "") {
        this.$router.push("/main/search");
      } else {
        console.log(this.searchContent)
        this.axios.post("/entity/search_eq", {"search_content":this.searchContent}).then((res) => {
          if (res.code === "0") {
            this.$router.push({
              path: "/main/show",
              query: { content: this.searchContent },
            });
          } else {
            this.$router.push({
              path: "/main/search",
              query: { content: this.searchContent },
            });
          }
        });
      }
    },
    toLogin() {
      this.$router.push("/login");
    },
    toAdminLogin() {
      this.$router.push("/admin_login");
    },
    logout() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        type: "warning",
        center: true,
      })
        .then(() => {
          if (this.user) {
            sessionStorage.removeItem("user");
            this.$message({
              type: "success",
              showClose: true,
              message: "退出登录成功",
            });
          } else {
            this.$message({
              type: "warning",
              showClose: true,
              message: "当前未登录",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "warning",
            showClose: true,
            message: "已取消退出登录",
          });
        });
    },
  },
  created() {
    this.user = sessionStorage.getItem("user");
  },
};
</script>

<style>
.el-dropdown-link {
  color: #409eff;
}
</style>